<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
/* 
  案例：将数组 映射成 [{age: 18}, {age: 29}, ...]

  var peoples = ages.map(function(item) {
    return {
      age: item
    }
  });
  console.log('peoples', peoples);
*/

/* 
  案例2：将数组 映射成 [{age: 19}, {age: 30}, ...]
    即 周岁映射成 虚岁

    var ages = [18, 29, 19, 9, 76, 1, 10, 100];
    var peoples = ages.map(function(item) {
      // 其他映射规则的代码，任意写
      return {
        age: item + 1
      }
    });
    console.log('peoples', peoples);
*/


/* 案例3：将数组 映射成 [{age: 19}, {age: 30}, ...] 并过滤出其中的成年人
    定义成年人：虚岁大于18即为成年人。

    var ages = [18, 29, 19, 9, 76, 1, 10, 100];
    var peoples = ages.map(function(item) {
      // 其他映射规则的代码，任意写
      return {
        age: item + 1
      }
    });
    var adults = peoples.filter(function(people) {
      // {age: 19}
      return people.age > 18;
    })
    console.log('adults', adults);
*/

/* 案例4：简写 上面的代码；
      即通过 arr.map(cb).filter(cb) 的形式简写：
        上面这种.map().filter 的形式叫「链式调用」。
      

      举例：
        arr.map(cb).filter(cb) 可行
        arr.map(cb).filter(cb).push(item) 可行
        arr.map(cb).filter(cb).push(item).pop() 不可行
          因为 arr.map(cb).filter(cb).push(item) 的返回值是 数字（length）
*/

var ages = [18, 29, 19, 9, 76, 1, 10, 100];
var adults = ages
  .map(function(item) {
    // 其他映射规则的代码，任意写
    return {
      age: item + 1
    }
  })
  .filter(function(people) {
    // {age: 19}
    return people.age > 18;
  });




console.log('adults', adults);

</script>